/*
 * @Author: xiaosihan
 * @Date: 2021-04-02 19:44:21
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-06-07 00:03:33
 */

import AntdDayjsWebpackPlugin from "antd-dayjs-webpack-plugin"; // antd 替换使用 dayjs
import HappyPack from 'happypack'; // 快乐打包
import path from 'path';

/**
 * webpack 公共方法
 *
 * @class WebpackUtils
 */
class WebpackUtils {

    constructor() { }

    _path(dir) {
        return path.join(__dirname, dir);
    }

    // 端口
    port = '8802';

    //项目目录
    srcPath = this._path('../src');

    // 打包目录
    buildPath = this._path('../build');

    // 入口文件
    indexPath = this._path('../src/index.tsx');

    // 公共包的目录
    vendorPath = this._path('../vendor/')

    // 网页标题
    indexTitle = 'xsh-react-three-chart';

    //网页图标
    favicon = this._path('../src/images/favicon.png');

    // html 文件
    indexTemplate = this._path('../src/index.html');

    // 引用别名
    resolve = {
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.less', '".wasm"'],
        alias: {
            "@ReactMixinComponent": this._path("../src/ReactMixinComponent/ReactMixinComponent.tsx"),
            "@components": this._path("../src/components"),
            "@images": this._path("../src/images"),
            "@pages": this._path("../src/pages"),
            "@fetch": this._path("../src/fetch"),
            "@globalStore": this._path("../src/globalStore.ts"),
            "@worker": this._path("../src/worker/werker.ts"),
            "xsh-react-three-chart": this._path("../xsh-react-three-chart/lib/index.ts"),
        }
    };

    // js 加载器
    jsLoader = {
        test: /\.jsx?$/,
        use: ["happypack/loader?id=jsx?"]
    }

    //ts 加载器
    tsLoader = {
        test: /\.tsx?$/,
        exclude: this._path("../src/worker/workThread.ts"),
        use: ["ts-loader"]
    }

    // css 加载器
    cssLoader = {
        test: /\.css$/,
        use: ["happypack/loader?id=css"]
    }

    //less 加载器
    lessLoader = {
        test: /\.less$/,
        use: ["happypack/loader?id=less"]
    }

    // 文件加载器
    flieLoader = {
        test: /\.(png|jpg|jpeg|gif|svg|mp3|ogg|wav|obj|fbx|gltf|glb|woff|eot|ttf|otf|xlsx|xls|pdf)$/,
        use: [{
            loader: 'file-loader',
            options: {
                name: 'file/[name]_[contenthash:2].[ext]'
            }
        }]
    }

    // wasm 加载器
    wasmLoader = {
        test: /\.wasm$/,
        use: ["webassembly/experimental"],
    }

    // 多线程 加载器
    workerLoader = {
        test: /workThread\.ts$/,
        use: [
            {
                loader: 'worker-loader',
                options: {
                    filename: 'worker/[name]_[contenthash:2].js'
                }
            },
            { loader: 'ts-loader' }
        ]
    }

    // 公共插件
    plugins = [
        new AntdDayjsWebpackPlugin(), // dayjs 替代 momentjs
        new HappyPack({
            id: 'jsx?',
            loaders: ["babel-loader?cacheDirectory=true"]
        }),
        new HappyPack({
            id: 'css',
            loaders: ['style-loader', "css-loader", 'postcss-loader']
        }),
        new HappyPack({
            id: 'less',
            loaders: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true,
                        modules: {
                            localIdentName: '[local]_[contenthash:2]',
                        }
                    }
                },
                "postcss-loader",
                'less-loader'
            ],
        }),
    ];

}

const webpackUtils = new WebpackUtils();

export default webpackUtils;